.knowledge-detail-container {
    height: calc(100vh - 100px);
    background: #f5f6f7;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.header-section {
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 16px 24px;

    .header-main {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .header-left {
        display: flex;
        align-items: center;

        .back-btn {
            color: #666;

            &:hover {
                color: #1a73e8;
                background: #e6f4ff;
            }
        }

        .title-divider {
            height: 20px;
            width: 1px;
            background: #ddd;
            margin: 0 16px;
        }

        .title-text {
            margin: 0;
            font-size: 18px;
            color: #1a1a1a;
        }
    }

    .header-right {
        display: flex;
        align-items: center;
        gap: 16px;

        .search-input {
            width: 280px;
            border-radius: 4px;
        }
    }
}

.main-content {
    flex: 1;
    display: flex;
    gap: 16px;
    padding: 16px;
    overflow: hidden;

    .tree-panel {
        width: 280px;
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        padding: 16px;
        display: flex;
        flex-direction: column;

        .tree-header {
            color: #666;
            font-weight: 500;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        :deep(.custom-tree) {
            height: 100%;
            overflow-y: auto;

            /* 新增滚动条样式 */
            &::-webkit-scrollbar {
                width: 6px !important;
                height: 6px !important;
            }

            &::-webkit-scrollbar-track {
                background: #f8f9fa;
                border-radius: 3px;
            }

            &::-webkit-scrollbar-thumb {
                background: #ced4da;
                border-radius: 3px;

                &:hover {
                    background: #adb5bd;
                }
            }

            &::-webkit-scrollbar-corner {
                background: transparent;
            }

            .ant-tree-switcher {
                align-self: center;
                width: 20px;
                height: 20px;
                color: #999;
            }

            .ant-tree-treenode {
                width: 100%;
                padding: 0;
            }

            .ant-tree-title {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                overflow: hidden;
            }

            .node-title {
                width: 120px;
                margin-right: 5px;
                overflow: hidden; // 防止内容溢出
                text-overflow: ellipsis; // 超出部分显示省略号
                white-space: nowrap; // 禁止换行
            }

            .ant-tree-node-content-wrapper {
                padding: 8px;
                transition: all 0.2s;
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 100%;

                &:hover {
                    background: #f5f5f5;
                }

                &.ant-tree-node-selected {
                    background: #e6f4ff !important;
                    color: #1677ff;
                }
            }

            .tree-icon {
                margin: -4px 3px 0 0;
                width: 18px;
            }

            .tree-icon-page {
                margin: -4px 1px 0 2px;
                color: #6a6a6a;
            }

            .tree-node-actions {
                display: flex;
                gap: 10px;

                .action-icon {
                    color: #666;

                    &:hover {
                        color: #1a73e8;
                    }
                }
            }
        }
    }
}

.action-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-right: 10px;
}
